<template>
  <div id="item"
       @mouseleave="showRecommend(false)"
        @mouseenter="showRecommend(true)">
    <transition name="fade">
      <div class="box" v-if="isShow" @click="transLink(item.link)">
        <div class="boxTitle"><h3 style="margin: 10px auto">{{item.title}}</h3></div>
        <div class="recommend">
          {{item.recommend}}
        </div>
      </div>
    </transition>
    <img :src="item.logo">
    <div class="title">
      <h3 class="text">{{item.title}}</h3>
    </div>

  </div>
</template>

<script>
  export default {
    name: "CompanyShowItem",
    props:{
      item:Object
    },
    data(){
      return{
        isShow:false
      }
    },
    methods:{
      showRecommend(item){
        // console.log(item)
        this.isShow = item
      },
      transLink(path){
        window.location.href = path
      }
    }
  }
</script>

<style scoped>
  #item{
    width: 300px;
    height: 300px;
    border: 1px solid #c7dbef;
    box-shadow: 0 0 5px #bfbebe;
    margin: 0 20px 20px;
    position: relative;
  }
  .box{
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
    padding: 20px;
    opacity: 0.8;
    color: #fff;
    background-color: #2c3e50;
  }
  img{
    width: 100%;
    height: 80%;
  }
  .text{
    padding: 0;
    margin: 0;
  }
  .fade-enter,.fade-leave-to {
    opacity: 0; /*点击按钮页面即将被显示，此时div标签处于隐藏状态*/
  }
  .fade-enter-active,.fade-leave-active {
    transition: opacity  2s; /* 对该CSS样式进行transition的监控,有3s的过渡*/
  }
  .recommend{
    /*background-color: #1d8925;*/
  }
</style>